<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/asset-favicon.ico">
    <title>社交-问答详情</title>

    <!-- 页面 css js -->
    <!-- <script type="text/javascript" src="../../plugins/sui/sui.min.js"></script> -->

    <link rel="stylesheet" type="text/css" href="./plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/yui/cssgrids-min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/sui/sui-append.min.css" />
    <link rel="stylesheet" type="text/css" href="./plugins/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-base.css" />
    <link rel="stylesheet" type="text/css" href="./css/widget-head-foot.css" />
    <link rel="stylesheet" type="text/css" href="./css/page-sj-headline-detail.css" />
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>

<body>
<div id="app_news_detail">
    <div class="wrapper">
        <!--引用组件-->
        <!--头部导航-->
<header>
  <div class="sui-navbar">
    <div class="navbar-inner">
      <a href="index-logined.html" class="sui-brand"><img src="./img/asset-logo-black.png" alt="社交"/></a>
      <ul class="sui-nav">
        <li class="active"><a href="./headline-logined.html">头条</a></li>
        <li><a href="./qa-logined.html" >问答</a></li>
        <li><a href="./activity-index.html" >活动</a></li>
        <li><a href="./makeFriends-index.html" >交友</a></li>
        <li><a href="./spit-index.html" >吐槽</a></li>
        <li><a href="./recruit-index.html"  >招聘</a></li>
      </ul>
      <form class="sui-form sui-form pull-left">
        <input type="text" placeholder="输入关键词...">
        <span class="btn-search fa fa-search"></span>
      </form>
        <div v-if="username" class="sui-nav pull-right info" >
       <li><a href="./person-homepage.html" target="_blank" class="homego"><img src="http://q2.qlogo.cn/g?b=qq&k=NOmIoArqZtJnKGaD8mdmuw&s=40&t=1542038400" alt="用户头像" /></a></li>
       <li class="hover"> <span class="fa fa-plus ">{{ username }}</span>
       <li><a href="./other-notice.html" target="_blank" class="notice">退出</a></li>
        <ul class="hoverinfo">
         <!--<li><i class="fa fa-share-alt" aria-hidden="true"></i> <a href="./headline-submit.html">去分享</a></li> -->
         <!--<li><i class="fa fa-question-circle" aria-hidden="true"></i> <a href="./qa-submit.html" target="_blank">提问题</a></li> -->
         <!--<li><i class="fa fa-comments" aria-hidden="true"></i><a href="./spit-submit.html" target="_blank">去吐槽</a></li> -->
         <!--<li><i class="fa fa-heartbeat" aria-hidden="true"></i> <a href="./makeFriends-submit.html" target="_blank">发约会</a></li> -->
        </ul> </li>
       <!--<li><a href="./person-homepage.html" target="_blank" class="homego"><img :src="user_img_url" alt="用户头像" /></a></li>-->
      </div>
      <div v-else class="sui-nav pull-right info">
          <li><a href="./person-loginsign.html" target="_blank">注册</a></li>
          <li><a href="./person-loginsign.html" target="_blank" class="sui-btn btn-login">登录</a></li>
       </div>
  </div>
  </div>
  
</header>
    

    </div>
    <!--两列布局-->
    <div class="wrapper headline-content">
        <div class="fl left-list">
            <div class="problem-detail">
    <!-- title area  -->
    <div class="title-intro">
        <h2>{{ news_detail.title }}</h2>
        <div class="operate">
            <span class="fl author">发布者:　{{ news_detail.user.username }}　<span class="time">{{ news_detail.create_time }}</span></span>
            <span class="fr ">收藏</span>
        </div>
        <div class="clearfix" v-html="news_detail.content"></div>
    </div>
    <!-- remark area -->
    <div class="answer-intro">
        <h4 class="answer-num">{{ comment_count }}条评论</h4>
        <div class="comment-box">
            <form class="comment-form sui-form form-inline">
                <img src="./img/widget-photo.jpg" alt="">
                <div class="input-prepend input-append input-box">
                    <input v-model="content" id="appendedPrependedInput" type="text" class="span2 input-fat real-box" placeholder="写下你的评论"><span @click="addComment(null)" class="add-on">提交</span>
                </div>
            </form>
        </div>
        <div class="remark-list">
            <ul class="lists">
                <li v-for="(comment,index) in news_comment" class="item">
                    <div class="fl img">
                        <!--<img src="./img/widget-photo.jpg" alt="">-->
                        <img :src="comment.user.img_url" alt="">
                    </div>
                    <div class="fl text">
                        <p class="author"><span class="name">{{ comment.user.username }}</span> 发布</p>
                        <p class="word">{{ comment.content }}</p>
                        <p class="tool"><a class="callback" @click="changeHie(index)" >回复</a>&nbsp;
                        <span v-if="comment.count!=0" class="remark-num">{{ comment.count }}条回复</span></p>
                    </div>
                    <div style="clear:both"></div>
                    <div class="edit-box" v-if="comment.is_hei" style="display:block;">
                        <form class="comment-form">
                            <textarea row="1" v-model="content" placeholder="使用评论询问更多信息或提出修改意见，请不要在评论里回答问题"></textarea>
                            <button type="button" class="sui-btn submit-comment" @click="addComment(comment.id,index)">提交评论</button>
                        </form>
                    </div>
                    <ul v-for="(comment_p,index) in news_comment" v-if="comment.id==comment_p.parent" class="inner-list">
                        <li class="item">
                            <div class="fl img">
                                <img :src="comment_p.user.img_url" alt="">
                            </div>
                            <div class="fl text">
                                <p class="author"><span class="name">{{ comment_p.user.username }}</span> 发布</p>
                                <p class="word">{{ comment_p.content }}</p>
                                <p class="tool"><a class="callback">回复</a>&nbsp;
                                <span v-if="comment_p.count!=0" class="remark-num">{{ comment_p.count }}条回复</span></p>
                            </div>
                            <div style="clear:both"></div>
                            <div class="edit-box" v-if="comment_p.is_hei" style="display:block;">
                                <form class="comment-form" >
                                    <textarea row="1" v-model="content" placeholder="使用评论询问更多信息或提出修改意见，请不要在评论里回答问题"></textarea>
                                    <button type="button" class="sui-btn submit-comment" @click="addComment(comment_p.id,index)">提交评论</button>
                                </form>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
        </div>
       <div class="fl right-tag">
            <div class="focus similar-problem">
    <div class="img-title">
        <div class="fl img">
            <img :src="news_detail.user.img_url" alt="">
        </div>
        <div class="fl btn-focus">
            <h4>{{ news_detail.user.username }}</h4>
            <button class="sui-btn btn-info btn-attention" >关注</button>
        </div>
        <div class="clearfix"></div>
    </div>
    <ul class="problem-list">
        <li v-for="new_a in author_news" class="list-item">
            <p class="list-title">{{ new_a.title }}<a :href="host_q+'/headline-detail?id='+new_a.id"></a></p>
        </li>
    </ul>
</div>
<div class="similar-problem">
    <h3 class="title">热门推荐</h3>
    <ul class="problem-list">
        <li class="list-item">
            <p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>
        </li>
        <li class="list-item">
            <p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>
        </li>
        <li class="list-item">
            <p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>
        </li>
        <li class="list-item">
            <p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>
        </li>
    </ul>
</div>
<div class="similar-problem">
    <h3 class="title">热门吐槽</h3>
    <ul class="problem-list">
        <!--<li v-for="(tucao,index) in tucaos" class="list-item">-->
            <!--&lt;!&ndash;<p class="list-title"><a>{{ tucao.content }}</a></p>&ndash;&gt;-->
            <!--&lt;!&ndash;:href="tucao.url"&ndash;&gt;-->
        <!--</li>-->
        <!--<li class="list-item">-->
            <!--<p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>-->
        <!--</li>-->
        <!--<li class="list-item">-->
            <!--<p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>-->
        <!--</li>-->
        <!--<li class="list-item">-->
            <!--<p class="list-title">如果你还是象棋新手，学会这些套路，你就可以去破残局赚钱了！</p>-->
        <!--</li>-->
    </ul>
</div>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="footer">
        <div class="wrapper">
            <div class="footer-bottom">
    <div class="link">
        <dl>
            <dt>网站相关</dt>
            <dd>关于我们</dd>
            <dd>服务条款</dd>
            <dd>帮助中心</dd>
            <dd>编辑器语法</dd>
        </dl>
        <dl>
            <dt>常用链接</dt>
            <dd>传智播客</dd>
            <dd>传智论坛</dd>
        </dl>
        <dl>
            <dt>联系我们</dt>
            <dd>联系我们</dd>
            <dd>加入我们</dd>
            <dd>建议反馈</dd>
        </dl>
        <dl>
            <dt>关注我们</dt>
            <dd>微博</dd>
            <dd>twitter</dd>
        </dl>

        <div class="xuke">
            <h3>内容许可</h3>
            <p>除特别说明外，用户内容均采用知识共享署名-非商业性使用-禁止演绎4.0 国际许可协议 (CC BY-NC-ND 4.0) 进行许可</p>
            <p>本站由 传智研究院 提供更新服务</p>
        </div>
    </div>


    <p class="Copyright">Copyright © 2017 传智问答社区 当前版本 0.0.1</p>
</div>
        </div>

    </div>

</div>



<script>
// $(function(){
//   $(".hover").hover(function(){
//     $(".hoverinfo").stop().animate({
//        opacity: "show"
//     },"slow");
//     $(this).find(".fa-plus").css("color","#e64620");
//   },function(){
//     $(".hoverinfo").stop().animate({
//        opacity: "hide"
//     },"slow");
//     $(this).find(".fa-plus").css("color","#000");
//   })
// })


    // $(function () {
    //     $(".callback").click(function () {
    //         $(this).parents(".text").siblings(".edit-box").toggle();
    //     });
    // })



    // var onOff = true;
    // $(".btn-attention").click(function () {
    //     if ($(this).onOff) {
    //         $(this).text("关注");
    //         $(this).css({"color":"#e64620","cursor":"not-allowed","background":"#f5f5f5","border-color": "#f5f5f5f5"})
    //         $(this).onOff = false;
    //     } else {
    //         $(this).text("已关注");
    //         $(this).css("color", "#999");
    //         $(this).onOff = true;
    //     }
    // })
</script>
</body>
<script type="text/javascript" src="js/host.js"></script>
<script type="text/javascript" src="js/headline_detail.js"></script>